<template>
  <div class="base-container" v-loading="loading">
    <camp-banner/>
    <div class="app-container campContainer">
      <BreadCrumb :typeFu="1" :statusFu="1"></BreadCrumb>
      <el-card class="box-card">
        <div class="text item">
          <div class="header-search">
            <el-select
              v-model="queryParams.onOff"
              placeholder="营地状态"
              clearable
            >
              <el-option
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
            <el-input
              v-model="queryParams.name"
              placeholder="营地名称搜索"
              clearable
            />
            <el-button class="search" @click="handleQuery">搜索</el-button>
            <el-button
              class="create"
              icon="el-icon-plus"
              @click="createCamp"
              v-hasPermi="['campSystem:campOper:add']"
            >
              创建营地
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card class="box-card" v-for="item in campList" :key="item.id">
        <div class="text item">
          <div class="info_title">
            <div class="title">{{ item.name }}</div>
            <span class="status">{{ statusFormat(item) }}</span>
            <el-switch
              v-model="item.onOff"
              active-color="#4D75F3"
              inactive-color="#BCC2CA"
              :active-value="1"
              :inactive-value="0"
              @change="changeCampStatus(item, $event)"
              v-hasPermi="['campSystem:campOper:status']"
            >
            </el-switch>
          </div>
          <div class="info_txt">报名起止时间：{{item.registrationStart}} 至 {{item.registrationEnd}}</div>
          <div class="info_txt">报名成功人数：{{item.signUpCount}}人</div>
          <div class="info_txt">营地系统网址：
            <el-tooltip effect="dark" content="点击复制" placement="top-end">
              <span class="copy-btn" v-clipboard:copy="item.visitUrl"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">{{item.visitUrl}}</span>
            </el-tooltip>
          </div>
          <el-dropdown trigger="click" class="info_btn" @command="handleCommand(item,$event)">
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="1"
                v-hasPermi="['campSystem:campManager:update']"
              >修改设置
              </el-dropdown-item>
              <el-dropdown-item
                :command="2"
                v-hasPermi="['campSystem:campManager:signup']"
              >查看报名(个人)
              </el-dropdown-item>
              <el-dropdown-item
                :command="3"
                v-if="item.auditIndividualInformation==1"
                v-hasPermi="['campSystem:campManager:check']"
              >审核资料
              </el-dropdown-item>
              <el-dropdown-item
                :command="4"
                v-if="item.fillIndividualInvitationcode==1"
                v-hasPermi="['campSystem:campManager:invite']"
              >邀请码管理
              </el-dropdown-item>
              <el-dropdown-item
                :command="5"
                v-hasPermi="['campSystem:campManager:agency:list']"
              >经销商管理
              </el-dropdown-item>
              <el-dropdown-item
                :command="6"
              >作业管理
              </el-dropdown-item>
              <el-dropdown-item
                :command="7"
              >消息通知
              </el-dropdown-item>
              <el-dropdown-item
                :command="8"
                v-hasPermi="['campSystem:campOper:remove']"
              >删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {
    GetCampList,
    RemoveCamp,
    ChangeCampStatus,
    GetSignUpCount
  } from "@/api/campSystem/campOper";
  import BreadCrumb from "@/components/CampSystem/CampOper/BreadCrumb";
  import CampBanner from "@/components/CampSystem/CampOper/Banner";

  export default {
    name: "campOper",
    components: {
      BreadCrumb,
      CampBanner
    },
    data() {
      return {
        loading: false,
        // 查询参数
        queryParams: {
          name: null,
          onOff: null
        },
        statusOptions: [], // 营地状态列表
        switchValue: '0',
        total: 0,// 总条数
        campList: [], // 营地列表数据
        isChecked: false // 防重复点击
      };
    },
    created() {
      this.getDicts("camp_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getList();
    },
    methods: {
      // 复制成功时的回调函数
      onCopy(e) {
        this.$message.success("链接已复制到剪切板！")
      },
      // 复制失败时的回调函数
      onError(e) {
        this.$message.error("抱歉，复制失败！")
      },
      // 开启/关闭营地
      changeCampStatus(data, val) {
        console.log(data, val)
        let txt = '';
        let status = val;
        if (val == 0) {
          txt = '关闭';
          status = 1;
        } else {
          txt = '开启';
          status = 0;
        }
        this.$confirm(`确认${txt}该营地?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const obj = {
            name: data.name,
            onOff: val
          }
          ChangeCampStatus(obj)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                data.onOff = status;
                return this.msgError(response.msg);
              }
              this.msgSuccess(response.msg);
            })
            .catch(error => {
              console.log(error);
              data.onOff = status;
              this.msgError(error)
            });
        }).catch(() => {
          data.onOff = status;
          this.msgInfo(`已取消${txt}`)
        });
      },
      handleCommand(data, val) {
        if (val == 8) {
          // 删除
          this.removeCamp(data.id);
        } else if(val == 6){
          //营地管理-作业管理
          this.$router.push({path: '/campSystem/campManage', query: {id: data.id, active: val, type: '1'}});
        }else {
          // 营地管理
          this.$router.push({path: '/campSystem/campManage', query: {id: data.id, active: val}});
        }
      },
      // 删除营地
      removeCamp(id) {
        this.$confirm('确认删除该营地?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          RemoveCamp(id)
            .then(response => {
              console.log(response);
              if (response.code != 200) {
                return this.msgError(response.msg);
              }
              this.msgSuccess(response.msg);
              this.getList();
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {
          this.msgInfo('已取消删除')
        });
      },
      // 创建营地
      createCamp() {
        this.$router.push('/campSystem/createCamp');
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 查询营地列表 */
      getList() {
        this.loading = true;
        GetCampList(this.queryParams)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.campList = response.data;
            this.campList.forEach(item => {
              this.getSignUpCount(item.name);
            })
            // this.total = response.total;
            this.loading = false;
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
      },
      //获取指定营地报名人数
      getSignUpCount(name) {
        const obj = {
          name: name
        }
        GetSignUpCount(obj)
          .then(response => {
            if (response.code != 200) {
              return this.msgError(response.msg);
            }
            this.campList.forEach(item => {
              if (item.name == name) {
                item['signUpCount'] = response.data;
                this.$forceUpdate();
              }
            })
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 字典状态字典翻译-营地状态
      statusFormat(row) {
        return this.selectDictLabel(this.statusOptions, row.onOff);
      },
    },
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/campCommon.scss";

  .campContainer {
    .header-search {
      // 输入框
      .el-input {
        width: 210px;
        height: 40px;

        .el-input__inner {
          height: 40px;
          line-height: 40px;
          border-radius: 4px 0px 0px 4px;
          border: 1px solid #4D75F3;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #BCBCBC;
        }
      }

      // 下拉框
      .el-select {
        width: 160px;
        height: 40px;
        margin-right: 20px;

        .el-input {
          width: 100%;

          .el-input__inner {
            line-height: 40px;
            border-radius: 4px;
            border: 1px solid #4D75F3;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #BCBCBC;
          }

          .el-input__icon {
            line-height: 40px;

            &::before {
              color: #4D75F3;
              font-size: 15px !important;
            }
          }

          &.search_select {
            .el-input__inner {
              border-radius: 4px 0 0 4px;
            }
          }
        }

      }

      // 按钮
      .el-button {
        vertical-align: top;
        height: 40px;
        background-color: #4D75F3;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        border: 1px solid #4D75F3;

        &.search {
          width: 90px;
          border-radius: 0px 4px 4px 0px;
        }

        &.create {
          float: right;
          width: 120px;
          border-radius: 4px;
          font-size: 16px;

          .el-icon-plus {
            font-size: 14px;
          }

          span {
            margin-left: 0;
          }
        }
      }
    }

    .text {
      position: relative;

      .info_title {
        .title {
          float: left;
          height: 20px;
          line-height: 20px;
          font-size: 20px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #12141C;
          margin: 6px 0;
        }

        .status {
          display: inline-block;
          text-align: center;
          width: 40px;
          height: 18px;
          line-height: 20px;
          background-color: #F59C45;
          border-radius: 9px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #FFFFFF;
          margin: 7px 0 7px 12px;
        }

        .el-switch {
          float: right;
          height: 28px;
          margin: 2px 0;

          .el-switch__core {
            width: 60px !important;
            height: 28px;
            border-radius: 20px;
            line-height: 28px;

            &::after {
              width: 20px;
              height: 20px;
              top: 2.5px;
              left: 2.5px;
            }
          }

          &.is-checked {
            .el-switch__core::after {
              left: 100%;
              margin-left: -22.5px;
            }
          }
        }
      }

      .info_txt {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #656872;

        .copy-btn {
          color: #4D75F3;

          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
      }

      .el-dropdown {
        position: absolute;
        right: 0;
        bottom: 0;

        .el-icon-more {
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background-color: #F0F0F0;
          border-radius: 4px;
        }
      }
    }
  }
</style>
